{% macro product_cards(products, topic=None) -%}
  <ul id="product-cards" class="card-grid cf">
    {% for product in products %}
      <li>
        {% if topic %}
          {% set prod_url = url('products.documents', product_slug=product.slug, topic_slug=topic.slug) %}
        {% else %}
          {% set prod_url = url('products.product', slug=product.slug) %}
        {% endif %}
        <a class="cf" href="{{ prod_url }}" data-event-category="link click" data-event-action="product" data-event-label="{{ product.title }}">
          <div class="icon">
            <img src="{{ product.image_url }}" alt="{{ pgettext('DB: products.Product.title', product.title) }}" />
          </div>
          <div class="title">{{ pgettext('DB: products.Product.title', product.title) }}</div>
          <div class="description">{{ pgettext('DB: products.Product.description', product.description) }}</div>
        </a>
      </li>
    {% endfor %}
  </ul>
{%- endmacro %}
